<template>
    <div>
        <nut-navbar class="header" title="我的" @on-click-back="router.push({name:home})" icon="share" @on-click-send="send"></nut-navbar>
        <main>
            <div class="user-info pb1">
                <div class="user-basic"><a>登录/注册</a></div>
                <ul class="user-stat flex">
                    <li>0<p class="m0 mth">收藏的商品</p></li>
                    <li>0<p class="m0 mth">关注的店铺</p></li>
                    <li>0<p class="m0 mth">我的足迹</p></li>
                </ul>
            </div>
            <div class="menu pt1">
                <nut-cell class="m0" title="我的礼券" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img62.ddimg.cn/upload_img/00487/11111/wd-012-02.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="积分抵现" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img60.ddimg.cn/upload_img/00487/11111/wd-012-03.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="我的电子书" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img62.ddimg.cn/upload_img/00528/1234/111.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="我的礼品卡" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img61.ddimg.cn/upload_img/00528/000/vip-1521514865.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="收货地址" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img63.ddimg.cn/upload_img/00487/11111/wd-012-05.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="客服反馈" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img60.ddimg.cn/upload_img/00487/11111/wd-012-07.png" />
                    </template>
                </nut-cell>
                <nut-cell class="m0" title="会员中心" is-link>
                    <template v-slot:icon>
                    <img class="nut-icon mrh" src="https://img61.ddimg.cn/upload_img/00528/000/vip-1521514865.png" />
                    </template>
                </nut-cell>
            </div>
        </main>
    </div>
</template>

<script>
import { defineComponent,ref,reactive,toRefs} from 'vue'
export default defineComponent({
    name: '',
    setup() {
        const data = reactive({

        })
        const refData = toRefs(data);
        return {
            ...refData,
        }

    }
});
</script>
<style lang='scss' scoped>
.header{
    height: 50px;position: fixed;box-sizing: border-box;top: 0;width: 100%;z-index:999;background-color: #fff;
}
main{
    height: calc(100vh - 100px);
    margin: 50px 0 70px 0;background-color: #eeeeee;
    .user-info{
        background-color: #fff;
        .user-basic{
            position: relative;;width: 100%;height: 120px;background: url(http://img61.ddimg.cn/upload_img/00610/home/user-bg.jpg) 100% 100%;
            a{color: #fff;position: absolute;top: 50%;left: 50%;margin: -17.5px 0 0 -50px;display: inline-block;text-align: center;width:100px;height: 35px;line-height: 35px;border: 1px solid #fff;border-radius: 25px;}
        }
        .user-stat{
            li{
                flex: 1;text-align: center;
                &:nth-of-type(2){
                    position: relative;
                    &::before{
                        content: '';display: block;position: absolute;left: 0;top: 2px;width: 1px;height: 37px;background-color: #e5e5e5;
                    }
                    &::after{
                        content: '';display: block;position: absolute;right: 0;top: 2px;width: 1px;height: 37px;background-color: #e5e5e5;
                    }
                }
            }
        }
    }
    .menu{
        text-align: left;
    }
}
</style>